<link rel="import" href="../polymer/polymer.html">
<script src="../tf-graph-common/lib/scene/minimap.js"></script>
<dom-module id="tf-graph-minimap">
<template>
<style>
:host {
  background-color:white;
  transition: opacity .3s linear;
  pointer-events: auto;
}

:host.hidden {
  opacity: 0;
  pointer-events: none;
}

canvas {
  border: 1px solid #999;
}

rect {
  fill: white;
  stroke: #111111;
  stroke-width: 1px;
  fill-opacity: 0;
  filter: url(#minimapDropShadow);
  cursor: move;
}

svg {
  position: absolute;
}
</style>
<svg>
  <defs>
    <filter id="minimapDropShadow" x="-20%" y="-20%" width="150%" height="150%">
      <feOffset result="offOut" in="SourceGraphic" dx="1" dy="1"></feOffset>
      <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.5 0"></feColorMatrix>
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2"></feGaussianBlur>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
    </filter>
  </defs>
  <rect></rect>
</svg>
<canvas class="first"></canvas>
<!-- Additional canvas to use as buffer to avoid flickering between updates -->
<canvas class="second"></canvas>
<canvas class="download"></canvas>
</template>
<script>
Polymer({
  is: 'tf-graph-minimap',

  /**
   * Initializes the minimap and returns a minimap object to notify when
   * things update.
   *
   * @param svg The main svg element.
   * @param zoomG The svg group used for panning and zooming the main svg.
   * @param mainZoom The main zoom behavior.
   * @param maxWandH The maximum width/height for the minimap.
   * @param labelPadding Padding in pixels due to the main graph labels.
   */
  init: function(svg, zoomG, mainZoom, maxWAndH, labelPadding) {
    return new tf.scene.Minimap(svg, zoomG, mainZoom, this, maxWAndH,
        labelPadding);
  }
});
</script>
</dom-module>
